<template>
    <!-- 总容器 -->
    <div class="wrapper" v-if="state==2" >
        <header>
            <font-awesome-icon icon="fa-solid fa-rotate-left" onclick="history.go(-1)"/>
            <p>退款</p>
            <div></div>
        </header>
        <div class="top-ban"></div>

        <section>
            <div class="success">
                <div class="icon-box">
                    <div class="icon">
                        <font-awesome-icon icon="fa-solid fa-check" />
                    </div>
                </div>
                <h1>申请退款成功！</h1>
                <p>退款将在24小时之内到账</p>
            </div>
            <div class="order-btn" @click="toAppointmentList">查看订单</div>
            <div class="continue" @click="toAppointment">继续为家人预约</div>
            <div class="info">
                <p>您的信息已经发送至体检机构</p>
                <p>取消预约后会发送短信至您的手机</p>
                <p>客服电话<span>4008-XXX-XXX</span></p>
            </div>
        </section>
        
        <div class="bottom-ban"></div>
        <Footer/>
    </div>
    <div class="wrapper" v-if="state==1">
        <header>
            <font-awesome-icon icon="fa-solid fa-rotate-left" onclick="history.go(-1)"/>
            <p>取消预约</p>
            <div></div>
        </header>
        <div class="top-ban"></div>

        <section>
            <div class="success">
                <div class="icon-box">
                    <div class="icon">
                        <font-awesome-icon icon="fa-solid fa-check" />
                    </div>
                </div>
                <h1>取消预约成功！</h1>
            </div>
            <div class="order-btn" @click="toAppointmentList">查看订单</div>
            <div class="continue" @click="toAppointment">继续为家人预约</div>
            <div class="info">
                <p>您的信息已经发送至体检机构</p>
                <p>取消预约后会发送短信至您的手机</p>
                <p>客服电话<span>4008-XXX-XXX</span></p>
            </div>
        </section>
        
        <div class="bottom-ban"></div>
        <Footer/>
    </div>
</template>
<script setup>
import Footer from '@/components/Footer.vue';
import { useRouter, useRoute } from "vue-router";
import {ref} from 'vue';
const router = useRouter();
const route = useRoute();


const state = route.query.state;




const returnHome=()=>{
    router.push({
        path: '/index',
    })
}
const toAppointmentList=()=>{
    router.push("/appointmentList");
}

const toAppointment=()=>{
    router.push("/appointment");
}

</script>
    
<style scoped>
@import "../assets/css/appointmentcancel.css";
</style>